<nz-modal [(nzVisible)]="visible" nzTitle="" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
  [nzOkLoading]="isOkLoading"  nzWidth="8rem" nzWrapClassName="vertical-center-modal" nzMask="false"
  [nzStyle]="{ top: '2.4rem' }" [nzOkText]='null'
  [nzCancelText]='null' [nzFooter]="addFooter"  class="addgraphic">
  <div nz-row>
    <div class="title" nz-col nzSpan="12">
      <i class="iconfont icon-add" *ngIf="title==='Add_Graphics'"></i>
      <i class="iconfont icon-pen01" *ngIf="title!=='Add_Graphics'"></i>
      {{"DisseminationManagement.Graphics." + title | translate}}
    </div>
  </div>
  <form nz-form [formGroup]="graphicInfoForm">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">
        {{"DisseminationManagement.Graphics.Name" | translate}}</nz-form-label>
      <nz-form-control [nzSm]="18" [nzXs]="24">
        <input nz-input [placeholder]="'' | translate" style="width:5.0rem;" formControlName="name" id="name"  autocomplete="off"  />
        <nz-form-explain *ngIf="graphicInfoForm.get('name')?.dirty && graphicInfoForm.get('name')?.errors">
          {{"EquipmentManagement.EquipmentManagement.The_input_is_not_valid" | translate}}
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="type">
        {{"DisseminationManagement.Graphics.Type" | translate}}</nz-form-label>
      <nz-form-control [nzSm]="18" [nzXs]="24">
        <nz-select formControlName="type" style="width:5.0rem; color: #afb0b2; font-size: 14px !important;" nzShowSearch nzAllowClear
          [nzPlaceHolder]="'' | translate" id="type">
          <nz-option *ngFor="let one of diss.graphicTypeArr" [nzLabel]="one" [nzValue]="diss.graphicTypeObj[one]">
          </nz-option>
        </nz-select>
        <nz-form-explain *ngIf="graphicInfoForm.get('type')?.dirty && graphicInfoForm.get('type')?.errors">
          {{"EquipmentManagement.EquipmentManagement.The_input_is_not_valid" | translate}}
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="height">
        {{"DisseminationManagement.Graphics.Height" | translate}}</nz-form-label>
      <nz-form-control [nzSm]="18" [nzXs]="24">
        <input nz-input [placeholder]="'' | translate" style="width:5.0rem" formControlName="height" id="height"  autocomplete="off" />
        <nz-form-explain *ngIf="graphicInfoForm.get('height')?.dirty && graphicInfoForm.get('height')?.errors">
          {{"EquipmentManagement.EquipmentManagement.The_input_is_not_valid" | translate}}
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="width">
        {{"DisseminationManagement.Graphics.Width" | translate}}</nz-form-label>
      <nz-form-control [nzSm]="18" [nzXs]="24">
        <input nz-input [placeholder]="'' | translate" style="width:5.0rem" formControlName="width" id="width"  autocomplete="off" />
        <nz-form-explain *ngIf="graphicInfoForm.get('width')?.dirty && graphicInfoForm.get('width')?.errors">
          {{"EquipmentManagement.EquipmentManagement.The_input_is_not_valid" | translate}}
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="width">
        {{"DisseminationManagement.Graphics.Pictogram" | translate}}</nz-form-label>
      <nz-form-control [nzSm]="6" [nzXs]="24">
        <itmp-img-upload [avatarUrl]="avatarUrl" (deleteOriginImg)="deleteOriginImg($event)" [imgUploadUrl]="diss.apiUrl_vms_uploadImg" (getImgData)="getImgData($event)" (getUploadStatus)="getUploadStatus($event)"></itmp-img-upload>
        <nz-form-explain style="color:#f5222d"
          *ngIf="graphicInfoForm.get('url')?.dirty && graphicInfoForm.get('url')?.errors">
          {{"EquipmentManagement.EquipmentManagement.The_input_is_not_valid" | translate}}
        </nz-form-explain>
      </nz-form-control>
      <div nzSm="12" nzXs="24" class="font-12-rem" style="color: white;" >
        <p><i class="iconfont icon-jinggao1 font-20-rem"></i>{{"DisseminationManagement.Graphics.photo_tip.title" | translate}}</p>
        <p>{{"DisseminationManagement.Graphics.photo_tip.pixel" | translate}}</p>
        <p>{{"DisseminationManagement.Graphics.photo_tip.format" | translate}}</p>
        <p>{{"DisseminationManagement.Graphics.photo_tip.size" | translate}}</p>
      </div>
    </nz-form-item>
  </form>
  <ng-template #addFooter>
    <div class="footer-click">
      <button (click)="handleCancel()" nz-button nzType="default">{{'UserManagement.ManageOrganization.Cancel'  | translate}}</button>
      <button (click)="handleOk()" nz-button nzType="primary">{{'UserManagement.ManageOrganization.Save'  | translate}}</button>
    </div>
  </ng-template>
</nz-modal>